<template>
  <div>
    <van-card
      v-for="(item, index) in $store.state.carList"
      :key="item.id"
      :num="item.count"
      :price="item.price.toFixed(2)"
      :title="item.title"
      :thumb="item.img"
    >
      <template #footer>
        <van-button @click="addItemCount(item)" size="mini">加</van-button>
        <van-button @click="delItemCount(index, item.count)" size="mini"
          >减</van-button
        >
      </template>
    </van-card>
    <!-- {{ $store.state.carList }} -->
  </div>
</template>

<script>
export default {
  methods: {
    addItemCount(item) {
      this.$toast("添加" + item.title + "成功");
      this.$store.commit("ADD_CARLIST", {
        item,
      });
    },
    delItemCount(index, count) {
      // 当数量为1出现弹框
      if (count === 1) {
        this.$dialog
          .confirm({
            title: "提示",
            message: "确定要删除嘛？",
          })
          // 确定会执行
          .then(() => {
            // on confirm
            this.$store.commit("REM_CARITEM", {
              index
            })
            this.$toast("删除成功");
          })
          // 取消会执行
          .catch(() => {
            // on cancel
            this.$toast("取消删除");
          });
      } else {
        this.$store.commit("DEL_CARLIST", {
          index,
        });
      }
    }
  },
};
</script>

<style>
</style>